<template>
  <div class="w-full m-3">
    <div class="p-inputgroup flex-1 w-5 mb-2">
      <InputText placeholder="输入用户名" v-model="searchKeyword" />
      <Button icon="pi pi-search" severity="success" @click="handleSearch"/>
    </div>
    <div class="overflow-y-auto w-8 h-30rem">
      <div class="" v-for="user in chatStore.userListNoFriend" :key="user.id">
        <FriendsItem :user-item="user"/>
        <Divider :pt="{ root: { class: 'divider' } }" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { InputText, Button, Divider } from '@/utils/primevue'
import FriendsItem from './components/FriendItem.vue'
import { ref } from 'vue';
import useChatStore from '@/stores/chat'

const chatStore = useChatStore()
const searchKeyword = ref<string>('')
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    chatStore.queryNotFriendsList({ username: searchKeyword.value.trim(), userId: chatStore.user.userId }, () => {})
  }
}

</script>

<style scoped lang="scss">
.divider {
  margin: 10px 0;
  &::before {
    border: 2px #eeeeee63;
  }
}
</style>
